在開始介紹前，如果沒有閱讀過 UnoCSS 作者 Anthony Fu 的這篇文章 重新构想原子化 CSS，即使你已經對 TailwindCSS、WindiCSS...等框架有一定程度的熟悉，都非常推薦可以閱讀一下，了解這個 CSS「引擎」與其他 CSS「框架」的差別。

安裝 UnoCSS

在 Day10 就有介紹過安裝方式：

1. 安裝指令：

npm i -D @unocss/nuxt

2. 修改 nuxt.config

export default {
  modules: [
    '@unocss/nuxt',
  ],
}

配置 UnoCSS

設定 UnoCSS 環境配置的方式有兩種：

1. 在 nuxt.config 中加入設定值。

export default {
  modules: [
    '@unocss/nuxt',
  ],
  unocss: {
    // presets
    uno: true, // enabled `@unocss/preset-uno`
    icons: true, // enabled `@unocss/preset-icons`
    attributify: true, // enabled `@unocss/preset-attributify`,

    // core options
    shortcuts: [],
    rules: [],
  },
}

2. 新增一個 unocss.config.ts 檔案來管理設定，這是我比較推薦的作法，不要讓 nuxt.config 寫了一堆東西看起來會很混亂，unocss.config.css 的基本結構如下。

import type { Theme } from '@unocss/preset-mini'
import { defineConfig} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  rules: [
    // ...
  ],
  theme: <Theme>{
    // ...
  },
  presets: [
    // ...
  ],
})

補充：
雖然 UnoCSS 的官方文件沒有非常詳盡的提供撰寫範例，但是可以參考 Anthony Fu 在個人其他專案中的配置內容，這對於如何設定 UnoCSS 的環境非常有幫助！
明天的內容也會依據這份設定檔來說明該如何配置 UnoCSS 的環境。